
<!-- 导航栏下面的头布局 -->
<template>
    <div class="app-header">
        <div class="container">
            <!-- logo -->
            <h1 class="logo"><router-link to="/home"></router-link></h1>
            <!-- 类型 -->
            <ul class="navs">
                <li class="home"><router-link to="/home">首页</router-link></li>
                <li v-for="(item,index) in categoryDataList" 
                :key="item.id"
                @mouseenter="showNav(index,true)"
                @mouseleave="showNav(index,false)"
                >
                    <!-- :to 是history模式，to是hash模式 -->
                    <router-link :to="`/category/${item.id}`">{{ item.name }}</router-link>

                    <!-- 具体分类下的导航 -->
                    <!--ref：用于父组件获取子组件中的数据，通过【this.$refs.ref值】获取子组件对象。
                        如果同时有多个组件，那么是个数组需要配合数组索引取某个具体对象-->
                    <app-header-nav :children="item.children" ref="ttt"/>
                </li>
            </ul>
            <!-- 搜索 -->
            <div class="search">
                <!-- 搜索icon -->
                <i class="icon-search iconfont"></i>
                <!-- 输入框 -->
                <input type="text" class="input-search" @keyup.enter="search" placeholder="搜一搜">
            </div>
            <!-- 购物车 -->
            <!-- TODO: 修复金额、数量展示不一致的bug  -->
            <div class="cart" @mouseenter="isShowCartList = true" @mouseleave="isShowCartList = false">
                <!-- icon -->
                <router-link to="/cart" class="curr">
                    <i class="icon-cart iconfont"></i>
                    <em v-if="allSelectedNum > 0">{{ allSelectedNum }}</em>
                </router-link>

                <!-- 购物车中的列表，带有动画。transition是vue中的动画组件 -->
                <transition name="a">
                    <div class="cart-list" v-show="isShowCartList">
                        <div class="list">
                            <!-- 购物车中的物品 item -->
                            <div class="item" v-for="item in list" :key="item.skuId">
                                <router-link :to="`/goods/${item.id}`">
                                    <img :src="item.picture" alt="" />
                                    <div class="center">
                                        <p class="name ellipsis">{{ item.name }}</p>
                                        <p class="attr ellipsis">{{ item.attrText }}</p>
                                    </div>
                                    <div class="right">
                                        <p class="price">¥{{ item.price }}</p>
                                        <p class="count">x{{ item.count }}</p>
                                    </div>
                                </router-link>
                                <i class="iconfont icon-close" @click="remove(item.skuId)"></i>
                            </div>
                        </div>
                        <div class="foot">
                            <div class="total">
                                <p>共{{ allSelectedNum }}件商品</p>
                                <p>￥{{ allSelectedTotalPrice }}元</p>
                            </div>
                            <button class="goPay" @click="$router.push('/cart')">去购物车结算</button>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
    </div>
</template>

<script>

import { mapGetters, mapState } from 'vuex';
import AppHeaderNav from './AppHeaderNav.vue'

export default {
    name: 'app-header',
    data: function () {
        return { isShowCartList: false, };
    },
    components:{
        AppHeaderNav
    },
    computed: {
        //使用辅助函数，引入category模块的state中的categoryDataList变量
        ...mapState('category', ['categoryDataList']),
        ...mapGetters('cart', ['allSelectedNum','allSelectedTotalPrice']),
        ...mapState('cart', ['list']),
    },
    methods: {
        remove(skuId) {
            this.$store.dispatch('cart/removeCartGoods', skuId);
        },

        search(){
            alert("搜索");
        },

        showNav(index,val){
            // this.$refs.ttt 是个组件数组
            console.log(val,index)
            console.log(this.$refs.ttt[index])
            this.$refs.ttt[index].show = val;
        }
    }
}
</script>

<!--  
    1.text-indent 文本缩进，可以为负数 
    2.background-size:contain  保持图像的横纵比，并将图像缩放成将适合背景区域的最大大小
    3.line-height 与 height 相等 ，单行文本垂直居中


    在CSS中，当一个元素的position属性设置为absolute时，该元素会从常规的文档流中被移除，并且相对于其最近的非static定位的祖先元素进行定位。如果该元素没有这样的祖先元素，它将相对于<html>元素，即页面的根元素进行定位。

    如果right属性不生效，可能有几个原因：

        没有定位上下文：absolute定位的元素需要有一个相对定位(position: relative;)、绝对定位(position: absolute;)、固定定位(position: fixed;)的祖先元素作为参考点。如果没有这样的祖先元素，right属性会相对于<html>元素定位，这可能不是你想要的效果。

        CSS优先级问题：可能有其他CSS规则具有更高的优先级，覆盖了right属性的设置。检查是否有更具体的选择器或者在CSS中后面定义的规则覆盖了right属性。

        属性冲突：如果同时设置了left和right属性，浏览器可能会忽略right属性（或者left属性），因为元素不能同时相对于其容器的两侧定位。

        计算错误：如果right属性的值计算后与元素的宽度加上左右padding和border的总和超过了其父元素的宽度，那么right属性可能会被调整，以避免元素溢出其父元素的边界。

        浏览器缓存：有时浏览器缓存可能会导致你看到的是旧的CSS样式。尝试清除缓存或使用无痕模式查看更改是否生效。

        父元素宽度问题：如果父元素的宽度是动态变化的，或者父元素本身也有定位属性，这可能会影响到right属性的表现。

    要解决这个问题，你可以尝试以下步骤：

        确保有一个相对定位的祖先元素。
        检查是否有CSS规则覆盖了right属性。
        避免同时设置left和right属性，除非你有特别的理由需要这样做。
        确保父元素有足够的空间，以适应absolute定位的元素。
        清除浏览器缓存或使用无痕模式检查样式更改。

-->

<style lang="less" scoped>
@import url('@/assets/styles/variables.less');

.app-header {
    background: #fff;

    .container {

        display: flex;
        align-items: center;
    }

    .logo {
        width: 200px;

        a {
            height: 132px;
            width: 100%;
            display: block;
            text-indent: -9999px;
            background: url(../assets/images/logo.png) no-repeat center 18px / contain;
        }
    }

    .navs {
        width: 820px;
        display: flex;
        justify-content: flex-start;
        padding-left: 40px;

        li {
            margin-right: 40px;
            width: 38px;
            text-align: center;

            a {
                font-size: 16px;
                display: inline-block;
                height: 32px;
                line-height: 32px;
            }

            &:hover {
                a {
                    color: @themeColor;
                    border-bottom: 1px solid @themeColor;
                }

            }
        }
    }

    .search {
        width: 170px;
        height: 32px;
        border-bottom: 1px solid #e7e7e7;
        line-height: 32px;

        .icon-search {
            font-size: 18px;
            margin-left: 5px;
        }

        .input-search {
            width: 135px;
            padding-left: 5px;
            color: #666;
        }
    }

    .cart {
        width: 50px;
        z-index: 600;
        position: relative;

        .curr {
            width: 100%;
            height: 32px;
            line-height: 32px;
            text-align: center;
            position: relative;
            display: inline-block;

            .icon-cart {
                font-size: 22px;
            }

            em {
                font-style: normal;
                position: absolute;
                right: 0;
                top: 0;
                padding: 1px 6px;
                line-height: 1;
                background-color: @helpColor;
                color: #fff;
                font-size: 12px;
                border-radius: 10px;
                font-family: Arial;
            }
        }

        .cart-list {
            position: absolute;
            background: #fff;
            width: 400px;
            height: 400px;
            top: 50px;
            right: 0px;
            box-shadow: 0 0 10px rgb(0 0 0 / 20%);
            border-radius: 4px;
            padding-top: 10px;

            &:before {
                content: '';
                width: 20px;
                height: 20px;
                background-color: #fff;
                position: absolute;
                top: -10px;
                right: 14px;
                transform: scaleX(0.6) rotate(45deg);
                box-shadow: -3px -3px 5px rgb(0 0 0 / 10%);
            }

            .list {
                height: 310px;
                overflow: auto;
                padding: 0 10px;

                /*滚动条整体样式*/
                &::-webkit-scrollbar {

                    /*高宽分别对应横竖滚动条的尺寸*/
                    width: 10px;
                    height: 0;
                }

                /*滚动条*/
                &::-webkit-scrollbar-thumb {

                    border-radius: 10px;
                    background: #b5b5b5;
                }

                /*滚动条背景*/
                &::-webkit-scrollbar-track {
                    border-radius: 10px;
                    background: #f5f5f5;
                }

                .item {
                    border-bottom: 1px solid #f5f5f5;
                    padding: 10px 0;
                    position: relative;

                    a {
                        display: flex;
                        align-items: center;

                        img {
                            height: 80px;
                            width: 80px;
                        }

                        .center {
                            padding: 0 10px;
                            width: 200px;

                            .name {
                                font-size: 16px;
                            }

                            .attr {
                                color: #999;
                                padding-top: 5px;
                            }
                        }

                        .right {
                            width: 100px;
                            padding-right: 20px;
                            text-align: center;

                            .price {
                                font-size: 16px;
                                color: #cf4444;
                            }

                            .count {
                                color: #999;
                                margin-top: 5px;
                                font-size: 16px;
                            }
                        }
                    }

                    i {
                        position: absolute;
                        bottom: 38px;
                        right: 0;
                        opacity: 0;
                        color: #666;
                        transition: all 0.5s;
                        cursor: pointer;
                    }

                    &:hover>i {
                        opacity: 1;
                    }
                }
            }

            .foot {
                position: absolute;
                left: 0;
                bottom: 0;
                height: 70px;
                width: 100%;
                /*
                开发中很奇怪，这个padding会导致宽度变大，比如父布局是400px，这里width是100% 实际布局竟然变成了420px
                
                解决办法（我加在全局样式中了）：
                设置box-sizing: border-box;  (content-box | border-box | inherit;)

                总结：
                在给元素设置padding、border时，是会默认加在元素的宽高上的，可以使用box-sizing的content-box属性更改设置，
                使padding、border不会改变元素设置的大小，而是缩小内容的width。
                */
                padding: 10px;
                display: flex;
                justify-content: space-between;
                background: #f8f8f8;
                align-items: center;

                .total {
                    padding-left: 10px;
                    color: #999;

                    p {
                        &:last-child {
                            font-size: 18px;
                            color: #cf4444;
                        }
                    }
                }

                .goPay {
                    width: 180px;
                    height: 50px;
                    font-size: 16px;
                    appearance: none;
                    outline: none;
                    text-align: center;
                    border: 1px solid transparent;
                    border-color: #27ba9b;
                    color: #27ba9b;
                    background: #e6faf6;
                    border-radius: 4px;
                    cursor: pointer;
                }
            }


        }


    }
}

/*动画*/

.a-enter,
.a-leave-to
{
    opacity: 0;
    transform:translateY(-200px) scaleY(0);
}

.a-enter-active,
.a-leave-active{
    /*
	transition：这是CSS中用于设置过渡效果的属性，它可以应用在多种属性上，比如宽度、高度、背景色、不透明度等，以创建平滑的动画效果。
	all：这个关键字指定了过渡效果应该应用到元素的所有属性上。如果不指定all，可以指定具体的CSS属性，比如background-color或margin等。
	0.2s：这个值指定了过渡效果的持续时间，这里是0.2秒。
	linear：这个关键字定义了过渡效果的速率，linear表示过渡效果的速度在整个动画过程中是恒定的。
			除了linear，还有其他选项，如ease、ease-in、ease-out和ease-in-out，它们分别表示不同的速度变化曲线。
	*/
    transition: all 0.2s linear;
}

.a-enter-to,
.a-leave
{
    opacity: 1;
}
</style>